<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2023-12-18 11:09:18
 * @LastEditors: 陈波
 * @LastEditTime: 2024-03-02 20:51:02
 * @Description: 
 * @FilePath: \graDesign\src\components\WaterMark\index.vue
-->
<!-- 
    @Author: 陈波
    @CreateTime: 2023-12-18
    @Description: 使用该组件时，如果我要挂载在某个DOM身上，确保该元素是相对定位
-->
<template>
  <!-- 水印效果实现 -->
  <el-watermark
    :font="font"
    :content="content"
    style="position: absolute; left: 0; bottom: 0; right: 0; top: 0; pointer-events: none;"
    :width="150"
    :offset="[50, 100]"
    :rotate="props.rotate"
  >
    <div />
  </el-watermark>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";
import { useDark } from "@vueuse/core";

/** 传值 -- 开始 */
// 接口
interface WaterMarkProps {
  content?: Array<string>;
  fontStyle?: string
  rotate?: number
}
// 接受父组件参数，配置默认值
const props = withDefaults(defineProps<WaterMarkProps>(), {
  content: ["Element+", "Element Plus"],
  fontStyle: "gray",
  rotate: -22
});
/** 传值 -- 结束 */

/** 水印部分 -- 开始 */
const isDark = useDark();

const font = reactive({
  color: "rgba(0, 0, 0, .15)",
});

watch(
  isDark,
  () => {
    if(props.fontStyle == 'gray') {
      font.color = isDark.value
        ? "rgba(255, 255, 255, .15)"
        : "rgba(0, 0, 0, .15)";
    }
    if(props.fontStyle == 'black') {
      font.color = isDark.value
        ? "rgba(255, 255, 255, 0.65)"
        : "rgba(0, 0, 0, 0.65)";
    }
    if(props.fontStyle == 'white') {
      font.color = "rgba(255, 255, 255, 0.7)"
    }
  },
  {
    immediate: true,
  }
);
/** 水印部分 -- 结束 */
</script>

<style scoped lang="scss"></style>
